<template>
<div>
  <!-- {{v}} -->
  <el-select v-bind="elcfg" v-model="v">
    <el-option v-for="opt in options" :key="opt[optcfg.valueField]" :label="opt[optcfg.labelField]" :value="opt[optcfg.valueField]"></el-option>
  </el-select>
</div>
</template>

<script>
//下拉框封装
import axios from 'axios'
export default {
  name:"myDropDown",
  props:['elcfg','optcfg','value'],
  methods:{
    async fillOptionsByApi() {      
      if(this.optcfg.dynamicOption){        
        if(!this.optcfg.dynamicOptionApi) return
        var api=JSON.parse(this.optcfg.dynamicOptionApi)
        if(api.method=='get'){
          // console.log('get api');
          await axios.get(api.url).then(resp=>{            
            this.options=resp.data[this.optcfg.resultField]
          })
        }
        else{
          // console.log('post api');
          await axios.post(api.url).then(resp=>{
            this.options=resp.data[this.optcfg.resultField]
          })
        }
      }
      else{
        if(this.optcfg && this.optcfg.staticOptions){
          var arr=JSON.parse(this.optcfg.staticOptions)
          this.options=arr
        }
      }      
    }
  },
  computed:{
    cmul(){
      return this.elcfg.multiple
    }
  },
  watch:{
    optcfg:{
      deep:true,
      immediate:true,
      async handler(n,o){ await this.fillOptionsByApi()}
    },
    v:{
      deep:true,
      handler(n,o){
        // console.log('emit',n);
        if(this.v==""){
          
        }
        else{
          this.$emit('input',this.v)
        }
      }
    },
    cmul(n,o){      
      if(n && n!=o){
        this.v=[]
      }
    }
  },
  data(){
    return {
      options:[],
      v:[]
    }
  }
}
</script>

<style>

</style>